<template>
  <div class="role-page">
    <Table row-key="id" :columns="columns" :data="listData">
      <template slot-scope="{ row }" slot="action">
        <BtnText type="primary" @BtnClick="handleAction(1, row)">配置</BtnText>
        <BtnText type="primary" @BtnClick="handleAction(2, row)">编辑</BtnText>
        <BtnText type="error" @BtnClick="handleAction(3, row)">删除</BtnText>
      </template>
    </Table>
    <roleGroupPermission
      v-if="isHide"
      :isHide="isHide"
      :updateIsHide.sync="isHide"
      :echoData="echoData"
      :types="types"
      :titleName="titleName"
      @actionSuccess="actionSuccess"
    />
    <Drawer :title="titleName" :closable="false" v-model="drawerValue">
        <BindMenu v-if="drawerValue" :authId="authId" :updateIsHide.sync="drawerValue"/>
    </Drawer>
  </div>
</template>

<script type="text/javascript">
import { authorityList, delByAuthId } from "@/api/system.js";

import RoleGroupPermission from "./permission.vue";
import BindMenu from "./bindMenu.vue";

export default {
  name: "permissionTable",
  components: {
    RoleGroupPermission,
    BindMenu
  },
  props: {
    row: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      formData: {
        page: 1,
        size: 10,
      },
      isHide: false,
      echoData: {},
      columns: [
        {
          title: "权限名称",
          key: "authName",
          tree: true,
        },
        {
          title: "最后修改时间",
          key: "updateDateTime",
        },
        {
          title: "操作人",
          key: "updateUserName",
        },
        {
          title: "操作",
          slot: "action",
          width: 240,
          align: "center",
        },
      ],
      listData: [],
      drawerValue: false,
      authId:"",
      titleName:"",
    };
  },
  methods: {
    handleAction(types, row) {
      if (types == 1) {
        this.types = "1";
        this.titleName = "绑定菜单权限";
        this.authId = row.permissionAuthorityId
        this.drawerValue = true;
      }
      if (types == 2) {
        this.types = "2";
        this.titleName = "编辑权限";
        this.echoData = row
        this.isHide = true;
      }
      if (types == 3) {
        this.$Modal.confirm({
          title: "删除",
          content: "<p>删除后无法恢复，确认删除吗？</p>",
          loading: true,
          onOk: async () => {
            let params = {
              permissionAuthorityId: row.permissionAuthorityId,
            };
            let data = await delByAuthId(params);
            this.$Modal.remove();
            this.$Message.success("删除成功！");
            this.authorityListData();
          },
        });
      }
    },
    async authorityListData() {
      let { companyId, permissionGroupId } = this.$props.row;
      let params = {
        ...this.formData,
        roleName: "",
        companyId: companyId,
        permissionGroupId,
      };
      console.log(this.$props.row, "row");
      let data = await authorityList(params);
      this.listData = data;
    },
    actionSuccess(){
      this.authorityListData()
    }
  },
  mounted() {
    this.authorityListData();
  },
};
</script>

<style lang="less" scoped></style>
